<!--
 * @Author: xuyijie
 * @Date: 2022-12-06 08:39:46
 * @LastEditors: xuyijie
 * @LastEditTime: 2023-01-29 10:28:08
 * @Description: 文件说明
-->
<script setup lang="ts">
import { RouteName } from '@/enum/RouteName'
import useMenuStore from '@/layouts/admin/useMenuStore'
import { ApplicationOne } from '@icon-park/vue-next'
import { onMounted } from 'vue'
//控制移动端与PC端菜单显示隐藏
const menuStore = useMenuStore()

onMounted(() => {
  document.documentElement.addEventListener('click', (e) => {
    if (document.documentElement.clientWidth < 640) menuStore.menuState = false
  })
})
</script>

<template>
  <div class="admin-menu">
    <div class="menu" :class="{ hidden: !menuStore.menuState }">
      <div class="logo cursor-pointer">
        <application-one
          theme="outline"
          size="30"
          fill="#dcdcdc"
          class="mr-2"
          @click="$router.push({ name: RouteName.HOME })" />
        <span class="text-md cursor-pointer" @click="$router.push({ name: RouteName.ADMIN })">前端脚手架</span>
      </div>
      <!-- 菜单 -->
      <div class="container" :key="menuStore.key">
        <dl v-for="(route, index) of menuStore.routes" :key="index" @click="menuStore.toggleClose(route)">
          <dt>
            <section>
              <div>
                <component :is="route.meta.menu?.icon" size="20" fill="#dcdcdc" class="mr-2" />
                <span class="text-md">{{ route.meta.menu?.title }}</span>
              </div>
              <icon-down :class="{ '-rotate-90 ': route.meta.isClick }" theme="outline" size="20" fill="#fff" />
            </section>
          </dt>
          <dd v-show="!route.meta.isClick">
            <div
              v-for="(r, key) of route.children"
              :key="key"
              @click.stop="menuStore.go(r)"
              :class="{ active: $route.name == r.name }"
              v-show="r.meta?.menu">
              {{ r.meta?.menu?.title }}
            </div>
          </dd>
        </dl>
      </div>
    </div>
    <div class="bg block md:hidden"></div>
  </div>
</template>
<style lang="scss">
.admin-menu {
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
  }
  @apply z-10 bg-gray-800 h-full absolute md:relative overflow-auto;
  .menu {
    @apply z-30 w-[200px];
    .logo {
      @apply text-gray-300 flex items-center p-4;
    }
    .container {
      dl {
        @apply text-gray-300 text-sm relative p-4;
        dt {
          @apply text-sm flex justify-between cursor-pointer items-center opacity-80;
          section {
            @apply flex justify-between items-center w-full;
            div {
              @apply flex items-center duration-500 transition;
            }
          }
        }
        dd {
          div {
            @apply opacity-80 text-xs py-3 pl-4 my-2 text-white rounded-md cursor-pointer duration-300 hover:bg-teal-600 hover:opacity-100 bg-gray-700;
            &.active {
              @apply bg-teal-700 opacity-100;
            }
          }
        }
      }
    }
  }
}
</style>
